<template>
    <div class="case-query-page">

        <div class="title" slot="header">
            <span class="text">用户列表</span>
            <list-search :cols="columns" @search="searchParamChange"/>
            <head-btns @load="pageBtns" @add="add" @mod="mod" @del="del"/>
        </div>
        <list-table ref="listTable" @selected="listSelected"/>
        <detail-info
                v-model="detailVisible"
                ref="detailFrom"
                @submit="getTableData"
        />
    </div>
</template>
<script>
    import {mapState, mapActions} from 'vuex'
    import userApi from "@/api/system/user";
    import utils from '@/assets/utils/zhzf-util';
    import deptApi from "@/api/system/dept";
    import detailInfo from './detail-info';
    import HeadBtns from "@/views/comps/zhzf/head-btns";
    import ListSearch from "../../comps/zhzf/list-search";
    import ListTable from "@/views/comps/zhzf/list-table";
    import {mapMutations} from "vuex";
    import CustBtnCol from '@/views/comps/zhzf/list-table-col-btn';
    import dictCache from "@/assets/utils/cache-dict-util";

    export default {
        name: "UserPage",
        components: {ListSearch, ListTable, HeadBtns, detailInfo, CustBtnCol},
        data() {
            return {
                query: {},
                loading: false,
                columns: [
                    {title: '用户名称', key: 'username', width: '100'},
                    {title: '用户昵称', key: 'nickname', width: '100'},
                    {title: '邮箱', key: 'email'},
                    {title: '电话', key: 'mobilePhone'},
                    {title: '部门', key: 'dept.name'},
                    {
                        title: '职位',
                        key: 'jobCode',
                        formatter: function(row,col,val){
                            let dict = dictCache.getDataInfo("0007",val);
                            return (dict && dict.name);
                        }
                    },
                    {
                        title: '操作',
                        key: 'op',
                        component: {
                            name: CustBtnCol,
                            props: {
                                items: [
                                    {text: '修改', emit: 'mod'},
                                    {text: '删除', emit: 'del'}
                                ]
                            }
                        }
                    }
                ],
                data: [],
                treedata: '',
                rowHandle: {},
                options: {
                    stripe: true,
                    highlightCurrentRow: true
                },
                pagination: {
                    currentPage: 1,
                    pageSize: 15,
                    total: 0
                },
                user: {},
                detailVisible: false,
                fromclose: false,
                selected: [],
            };
        },
        computed: {
            ...mapState('d2admin/user', [
                'info'
            ])
        },
        mounted() {
            this.$bus.$off('mod').$on('mod', res => {
                this.selected = [res];
                this.mod();
            });
            this.$bus.$off('del').$on('del', res => {
                this.selected = [res];
                this.del();
            });
            this.initPage();
            this.getdepData();
        },
        methods: {
            ...mapMutations({
                pageInit: "d2admin/page/init"
            }),
            pageBtns(btns) {
                btns = btns || [];
                this.rowHandle = {
                    width: 150, custom: []
                };
                btns.forEach(item => {
                    if (item.url == 'mod') {
                        this.rowHandle.custom.push({
                            title: item.name,
                            size: 'mini',
                            emit: `${item.url}-model`,
                            icon: item.icon,
                            style: `color:${item.url == 'del' ? '#f53c1b' : '#1B98F5'}`
                        });
                    }
                })
            },
            listSelected(list) {
                this.selected = list;
            },
            async searchParamChange(query) {
                await this.$refs.listTable.reloadData(query);
            },
            async getdepData() {
                let res = await deptApi.childDeptPage({type: 1});
                let treeList = utils.generatorDeptTree(res.data);
                this.treedata = treeList.treeList;
            },
            showDetail(row) {
                row = row || {};
                this.detailVisible = true;
                this.$refs.detailFrom.getdepData({treeList: this.treedata, info: JSON.parse(JSON.stringify(row))});
            },
            async getTableData() {
                let res = await userApi.userPage();
                this.data = res.data.rows;
            },
            async initPage() {
                await this.$refs.listTable.initPage({
                    method: userApi.userPage,
                    cols: this.columns
                })
            },
            add() {
                this.showDetail();
            },
            mod() {
                if (this.selected.length != 1) {
                    utils.showTips("请选择一个数据", false);
                    return;
                }
                this.showDetail(this.selected[0]);
            },
            del() {
                if (!this.selected.length) {
                    utils.showTips("请选择要删除的数据", false);
                    return;
                }
                this.$confirm("确认删除？", "确认信息", {
                    distinguishCancelAndClose: true,
                    confirmButtonText: "删除",
                    cancelButtonText: "取消"
                }).then(async () => {
                    let delIds = [];
                    this.selected.forEach(item => {
                        delIds.push(item.id);
                    });
                    let res = await userApi.delUser(delIds);
                    if (!res.ok) {
                        utils.showTip(res.msg, false);
                        return;
                    }
                    this.listSelected = await this.getTableData();
                });
            },
        }
    };
</script>
